<!-- 选择收货地址 -->
<template>
    <div class="address-container">
        <div class="goods-wrapper">
            <div class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="goDetailPage(item)">
                <div><img :src="item.picUrl" /></div>
                <p><strong>{{item.title}}</strong></p>
                <h4 v-if="item.pay == 'cvnt'"><span>{{item.price}}</span>CVNT</h4>
                <h4 v-else>￥<span>{{item.price}}</span></h4>
            </div>
        </div>
        <div class="bottom-info"><!-- :class="{'fixed-position': positionFlag, 'static-position': !positionFlag}"-->
            <p @click="goToMyOrder" class="order-btn">我的订单</p>
        </div>
    </div>
</template>

<script>
  import {userInfo, goodsPrice} from 'api/register';
  var uid;
  var token;
  var phone;
  var area;
  var shopToken;
  export default {
    beforeRouteEnter(to, from, next) {
      uid = to.query.uid;
      token = to.query.token;
      phone = to.query.phone;
      area = to.query.area;
      shopToken = to.query.shopToken;
      localStorage.setItem('wallet_uid', uid);
      localStorage.setItem('wallet_phone', phone);
      localStorage.setItem('wallet_area', area);
      localStorage.setItem('wallet_shopToken', shopToken);
      next((vm) => {
        let query = to.query;
        // console.log(query);
        Object.assign(vm, query);

      })
    },
    data () {
      return {
        uid: '',
        token: '',
        phone:'',
        area: '',
        shopToken: '',
        gid: 1,
        positionFlag: false,
        goodsList: [
          {picUrl: require('assets/images/router/min-router2.png'), title: '人人影视路由器', price: '799', path: 'product_detail', gid: 1},
          // {picUrl: require('assets/images/reward/1qi.jpg'), title: '人人路由抽奖券', price: '20', pay: 'cvnt', path: 'product_detail2', gid: 2},
          //   {picUrl: require('assets/images/reward/2qi.jpg'), title: '人人路由抽奖券', price: '20', pay: 'cvnt', path: 'product_detail3', gid: 3},
          //   {picUrl: require('assets/images/reward/3qi.jpg'), title: '人人路由抽奖券', price: '20', pay: 'cvnt', path: 'product_detail4', gid: 4},
            // {picUrl: require('assets/images/reward/4qi.jpg'), title: '人人路由抽奖券', price: '20', pay: 'cvnt', path: 'product_detail5', gid: 5},
            // {picUrl: require('assets/images/reward/5qi.jpg'), title: '人人路由抽奖券', price: '20', pay: 'cvnt', path: 'product_detail6', gid: 6},
            /*
          {picUrl: require('assets/images/goods.png'), title: '1T硬盘加人人影视路由器 套餐', price: '1600'},
          {picUrl: require('assets/images/goods.png'), title: '2T硬盘加人人影视路由器 套餐', price: '1900'},
          {picUrl: require('assets/images/goods.png'), title: '3T硬盘加人人影视路由器 套餐', price: '2100'},
          {picUrl: require('assets/images/goods.png'), title: '人人影视路由器', price: '1200'},
          {picUrl: require('assets/images/goods.png'), title: '1T硬盘加人人影视路由器 套餐', price: '1600'},
          {picUrl: require('assets/images/goods.png'), title: '2T硬盘加人人影视路由器 套餐', price: '1900'},
          {picUrl: require('assets/images/goods.png'), title: '3T硬盘加人人影视路由器 套餐', price: '2100'}*/
        ]
      }
    },
    mounted(){
      // window.addEventListener('scroll', this.handleScroll);
        //alert(location.href)
    },
    computed: {

    },
    methods: {
      /*handleScroll() {
        var scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
        var window_height = window.innerHeight/!* + document.querySelector('body').offsetTop*!/;
        if (scrollHeight <= window_height) {
          this.positionFlag = false;
        } else {
          this.positionFlag = true;
        }
      },*/
      goDetailPage(item) {
        this.$router.push({path: item.path, query: {
          gid: item.gid,
          uid: this.uid,
          token: this.token,
          shopToken: this.shopToken,
          phone: this.phone,
          area: this.area
        }});
      },
      goToMyOrder() {
        this.$router.push({path: '/myOrder', query: {}});
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import 'common/scss/index.scss';
  body,html{
    height:100%;
  }
  .address-container{
    /*height:calc(100% - 88px);*/
    height:100%;
    background:#F5F5FB;
    overflow:hidden;
    /*overflow-y:auto;
    overflow-x:hidden;*/
  }
  .goods-wrapper{
    /*margin:0 30px;*/
    /*border: 1px solid red;*/
    padding: 30px 30px;
    height:calc(100% - 88px);
    overflow-y:auto;
    .goods-item{
      display:inline-block;
      width: 48.5%;
      margin-right:2.99%;
      border-radius:10px;
      margin-bottom:18px;
      background:rgba(249,249,249,1);
      box-shadow:0 2px 4px 0 rgba(10,29,87,0.3);
      img{
        width:100%;
        height:auto;
        opacity:1;
        border-radius:10px 10px 0 0;
      }
      p{
        margin-top:9px;
        margin-left:12px;
        height:49px;
        line-height:1.35;
        font-size:26px;
        color:#212121;
        strong{
          font-size:26px;
        }
      }
      h4{
        margin:27px 0 9px 12px;
        font-size:20px;
        color:#C22F2F;
        span{
          font-size:28px;
          vertical-align: middle;
        }
      }
    }
    .goods-item:nth-child(even) {
      margin-right:0;
    }
  }

  /*.bottom-info{
    !*position:fixed;*!
    bottom:0;
    left:0;
    right:0;
    width:100%;
    height:88px;
    line-height:88px;
    .order-btn{
      font-size:28px;
      text-align:center;
      color:#fff;
      background:#173e8f;
    }
  }*/
  .bottom-info{
    display:flex;
    height:88px;
    line-height:88px;
    align-items:center;
    .order-btn{
      width:100%;
      height:88px;
      line-height:88px;
      font-size:28px;
      text-align:center;
      color:#fff;
      background:#173e8f;
    }
  }
  /*.fixed-position{
    position:fixed;
  }
  .static-position{
    position:static;
  }*/





</style>
